<template>
	<view class="share_boxs">
		<view class="wx" v-if="weixin">
			<image :src="IMGLink+'/shopping/share.png'" mode=""></image>
		</view>
		<view class="share_option_box" v-else>
			<view class="share_title">
				{{title}}
			</view>
			<view class="share_option">
				<view class="share_item" v-for='(i,index) in list' :key='index' @click="onSelect(i)">
					<view class="share_icon">
						<image :src="i.icon" mode=""></image>
					</view>
					<view class="share_text">
						{{i.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	// #ifdef H5
	const wx = require('@/js_sdk/weixin-js-sdk');
	// #endif
	import {
		is_wx,
		is_Ios
	} from '@/utils/weixin.js'
	import {
		h5ShareTask
	} from '@/api/shopping/shopping.js'
	export default {
		name: "share",
		props: {
			objs: {
				type: Object,
				default () {
					return {
						title: '',
						link: '',
						desc: '',
						imgUrl: ''
					}
				}
			},
			title: {
				type: String,
				default: '立即分享'
			},
			list: {
				type: Array,
				//#ifdef H5
				default () {
					return [{
							name: '微信',
							icon: this.IMGLink + '/shopping/share-sheet-wechat.png'
						},
						{
							name: '朋友圈',
							icon: this.IMGLink + '/shopping/share-sheet-wechat-moments.png'
						},
					]
				}
				//#endif
			}
		},
		watch: {
			objs: {
				handler(value) {
					this.wxdata = Object.assign({}, value)
				},
				deep: true
			}
		},
		data() {
			return {
				IMGLink: this.IMGLink,
				weixin: false,
				wxdata: {}
			}
		},
		mounted() {
			this.wxdata = Object.assign({}, this.objs);
			this.weixin = is_wx();
			if (this.weixin) {
				this.groupInvite()
			}
		},
		methods: {
			onSelect(option) {
				let type = this.filterName(option.name);
				if (is_Ios()) {
					var messageStr = `${this.wxdata.link},${this.wxdata.title},${this.wxdata.desc},${type}`;
					window.webkit.messageHandlers.wx_share.postMessage(messageStr);
				} else {
					pmh5.wx_share(this.wxdata.link, this.wxdata.title, this.wxdata.desc, type);
				}
				this.$emit('shareTask');
				this.closed();
			},
			filterName(name) {
				switch (name) {
					case '微信':
						return 'session';
					case '朋友圈':
						return 'timeline';
					default:
						return 'session';
				}
			},
			groupInvite() {
				h5ShareTask({
					url: location.href
				}).then(res => {
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.noncestr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
					});
					wx.ready(() => {
						this.share_wx(this.wxdata);
					});
					wx.error(function(err) {
						console.log(err);
					});
				})
			},
			closed() {
				this.$emit('closed')
			},
			share_wx(data) {
				wx.updateAppMessageShareData({
					...data
				})
				wx.updateTimelineShareData({
					...data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.share_boxs {
		.wx {
			image {
				width: 100%;
				height: 226rpx;
			}
		}

		.share_option_box {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			padding: 20rpx 0rpx;
			background: #fff;
			width: 100%;
			overflow-y: visible;
			border-radius: 18px 18px 0px 0px;
		}

		.share_title {
			margin: 30rpx auto;
			font-size: 36rpx;
			text-align: center;
			line-height: 38rpx;
			color: #646566;
		}

		.share_option {
			display: flex;
			padding: 30rpx 0;
		}

		.share_item {
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;

			.share_icon {
				image {
					display: block;
					width: 96rpx;
					height: 96rpx;
					margin: 0 32rpx;
				}
			}

			.share_text {
				color: #646566;
				margin-top: 16rpx;
				font-size: 24rpx;
				padding: 0 8rpx;
			}

			// height: 200rpx;
		}
	}
</style>
